<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:h="http://xmlns.jcp.org/jsf/html"
      xmlns:p="http://primefaces.org/ui"
      xmlns:f="http://xmlns.jcp.org/jsf/core">
   <h:head>
        <title>Sign Up</title>
    </h:head>
     <h:body style="color: #3366ff; font-family: sans-serif">
        <div align="left" >
            <h1>Create an account</h1>
            <h:form>
                <h:panelGrid id="grid" columns="3" cellpadding="5" style="color: black; font-family: sans-serif">
                    
                    <h:outputLabel for="firstname" value="Name" />
                    <p:inputText id="firstname" value="#{registrationBean.firstName}" required="true" requiredMessage="first name required" />
                    <p:message for="firstname" />
                    
                    <br></br>
                    <p:inputText id="lastname" value="#{registrationBean.lastName}" required="true" requiredMessage="last name required" />
                    <p:message for="lastname" />
                    
                    <h:outputLabel value="User name" />
                    <p:inputText id="username" value="#{registrationBean.username}" required="true" requiredMessage="a user name is required" validatorMessage="user name must be alphanumeric and more than 4 characters"> 
                        <f:validateLength minimum="4" />
                        <f:validateRegex pattern="^[a-zA-Z0-9_]+$" />
                    </p:inputText>
                    <p:message for="username" /> 
                    
                    <h:outputLabel value="Personal email" />                         
                    <p:inputText id="email" value="#{registrationBean.email}" required="true" validatorMessage="a valid email is required" requiredMessage="your personal email is required" >
                        <f:validateRegex pattern="^[_A-Za-z0-9-\+]+(\.[_A-Za-z0-9-]+)*@[A-Za-z0-9-]+(\.[A-Za-z0-9]+)*(\.[A-Za-z]{2,})$" />
                    </p:inputText>
                    <p:message for="email" />
                                                         
                    <h:outputLabel value="Re-enter email" />
                    <p:inputText type="email" id="emailagain" value="#{registrationBean.emailagain}" required="true" validatorMessage="the emails must match" requiredMessage="retype personal email is required" />
                    <p:message for="emailagain" />
                                                            
                    <h:outputLabel for="newpassword" value="Create password" />
                    <p:password id="newpassword" value="#{registrationBean.password}" match="newpasswordagain" label="Password 1" required="true" requiredMessage="a password is required" validatorMessage="password is not in the required range">
                        <f:validateLength minimum="8" maximum="16" />
                    </p:password>
                    <p:message for="newpassword" />
                    
                    <h:outputLabel for="newpasswordagain" value="Re-enter password" />
                    <p:password id="newpasswordagain" value="#{registrationBean.password}" label="Password 2" required="true" requiredMessage="a password is required" validatorMessage="password mismatch" />
                    <p:message for="newpasswordagain" />
                    
                    <br/>
                    <h:panelGrid columns="2">
                    <p:commandButton value="Create Account" id="createaccount" action="#{registrationBean.createAccount()}" update="grid" validateClient="true" style="margin-right:10px" />
                    <p:button outcome="home" value="Cancel" />
                    </h:panelGrid>
                    
                    <p:watermark for="firstname" value="first" id="wfirst"/>
                    <p:watermark for="lastname" value="last" id="wlast"/>
                    <p:watermark for="newpassword" value="8 min / 16 max" id="wpass"/>
                    <p:watermark for="username" value="4-characters min" id="wun"/>
                    
                                                                        
                </h:panelGrid>

            </h:form>
          
        </div>        
    </h:body>
</html>